<template>
  <a-modal
    width="600px"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <modalTitle @close="close" title="无人机任务"></modalTitle>
    </template>
    <div style="padding: 0 10px 10px 10px">
      <!-- <iframe style="border: none; width:100%; height:400px;"></iframe> -->
      <iframe :src="spUrl" id="iFrame1" name="iFrame1" width="100%" height="400px" frameborder="0"></iframe>
    </div>
  </a-modal>
</template>
<script setup>
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"
// import { UserOutlined } from '@ant-design/icons-vue'

const spUrl = ref("")

const modalShow = ref(false)

const close = () => {
  modalShow.value = false
}
const show = (e) => {
  // spUrl.value = localStorage.getItem("spUrl")
  spUrl.value = "https://fh.dji.com/share/VvLue5zMVSE"
  modalShow.value = true
}
defineExpose({ show, close })
</script>
<style>
.myform .ant-select:not(.ant-select-customize-input) .ant-select-selector {
  background: #00000066;
  border: 1px solid #57ffff80;
}

.myform .ant-select .ant-select-arrow {
  color: #57ffff;
}

.myform .ant-select-single.ant-select-sm .ant-select-selector {
  color: #fff;
  font-size: 12px;
}

.myform .ant-select .ant-select-selection-placeholder {
  color: #fff;
  font-size: 12px;
}

.myform .ant-select .ant-select-selection-search {
  color: #fff;
  font-size: 12px;
}

.ant-select-dropdown {
  background: #000000 !important;
  color: #fff;
}

.ant-select-dropdown .ant-select-item {
  color: #fff;
  font-size: 12px;
}
</style>
<style>
.myform .ant-input-sm {
  /* border-radius:20px; */
  padding: 2px 10px;
}

.myform .ant-input {
  background-color: #00000066;
  border: 1px solid #57ffff80;
  color: #ffffff;
  font-size: 12px;
}

.myform .ant-input::placeholder {
  color: #ffffff;
  font-size: 12px;
}
</style>
<style scoped>
.item {
  display: flex;
  align-items: center;
  width: 120px;
  margin-right: 20px;
  margin-bottom: 10px;
  background-color: #00000066;
  padding: 5px 10px 5px 5px;
  border-radius: 99px;
}

.infobox {
  background: #4ddecf1a;
  padding: 10px 16px;
  border: 1px solid #4ddecf33;
  border-radius: 10px;
  color: #ffffff;

  .label {
    font-size: 12px;
    width: 80px;
  }
}

.btn {
  background: linear-gradient(180deg, rgba(0, 36, 42, 0.5) 0%, rgba(0, 67, 78, 0.5) 100%);
  border: 1px solid #57ffff;
  color: #ffffff;
  font-size: 10px;
  padding: 5px 20px;
  border-radius: 99px;
  cursor: pointer;
  margin-bottom: 10px;
}
</style>
